import {connect} from "dva";
import {useEffect} from "react"
import { Table,Divider,Button, Col, Row, Input,Drawer, Form } from 'antd';
import * as api from "../../until/change"
import * as api1 from "../../until/del"
const {Column} =Table;
const uid=localStorage.getItem("uid")
const token=localStorage.getItem("token")


class DrawerForm extends React.Component {
	constructor(props){
		super(props)
	}
	 state = { visible: false };
	
	  showDrawer = () => {
	    this.setState({
	      visible: true,
	    });
	  };
	
	  onClose = () => {
	    this.setState({
	      visible: false,
	    });
		this.props.form.validateFields((err, values) => {
		  if (!err) {
		    console.log('Received values of form: ', values,this.props.name);
			api.changes({pid:this.props.name,pname:values.name,pprice:values.price,pdesc:values.desc}).then(data=>{
				// console.log(data)
				alert(data.data.msg)
				window.history.go(0)
			})
			}
		  });
	  };
	  
	 
	  render() {
	      const { getFieldDecorator } = this.props.form;
		  return(
			<div>
				<Button type="primary" onClick={this.showDrawer}>change</Button>
				<Drawer
				   title="Change the production"
				   width={720}
				   onClose={this.onClose}
				   visible={this.state.visible}
				   bodyStyle={{ paddingBottom: 80 }}
				>
				<Form layout="vertical" >
					<Form.Item label="Name">
					  {getFieldDecorator('name', {
						rules: [{ required: true, message: 'Please enter new name' }],
					  })(<Input placeholder="Please enter new name" />)}
					</Form.Item>
					<Form.Item label="Price">
					  {getFieldDecorator('price', {
						rules: [{ required: true, message: 'Please enter new price' }],
					  })(<Input placeholder="Please enter new price" />)}
					</Form.Item>
					<Form.Item label="Desc">
					  {getFieldDecorator('desc', {
						rules: [{ required: true, message: 'Please enter new desc' }],
					  })(<Input placeholder="Please enter new desc" />)}
					</Form.Item>
				</Form>
				<div
					style={{
					  position: 'absolute',
					  right: 0,
					  bottom: 0,
					  width: '100%',
					  borderTop: '1px solid #e9e9e9',
					  padding: '10px 16px',
					  background: '#fff',
					  textAlign: 'right',
					}}
				  >
					<Button onClick={this.onClose} style={{ marginRight: 8 }}>
					  Cancel
					</Button>
					<Button onClick={this.onClose} type="primary" >
					  Submit
					</Button>
				  </div>
				</Drawer>
			</div>
		  )
	   }
}
const App = Form.create()(DrawerForm);
function Index(props){
	useEffect(()=>{
		props.dispatch({
			type:"info/getData",
			payload:{
				
			}
		})
		props.dispatch({
			type:"info/getManager",
			payload:{
				pagenum:160,
				pagesize:70
			}
		})
		
	},[])
	
	
	return(
		<div>
			<Table dataSource={props.list}>
				<Column title="Name" dataIndex="pname" key="pname" ellipsis={true}/>
				<Column title="Price" dataIndex="pprice" key="pprice" />
				<Column title="Change" key="action" render={(text,record)=>(
						<App name={record.pid}/>
				)}/>
				<Column title="Del" key="action1" render={(text,record)=>(
						<Button type="danger" onClick={(e)=>{
							console.log(e.target)
							let tar=e.target
							
						api1.del({pid:record.pid,uid:uid,token:token}).then(data=>{
							alert(data.data.msg)
							tar.parentElement.parentElement.remove();
						})
						
						}}>deleted</Button>
				)}/>
			</Table>
		</div>
	)
}

export default connect(state=>state.info)(Index)